<template>
  <l-panel style="padding: 0">
    <template #toolLeft>
      <l-query2
        :labelWidth="0"
        :popoverWidth="240"
        :items="queryItems"
        :formData="queryData"
        :loading="tableLoading"
        @search="handleSearch"
      >
        <template #keyWord>
          <el-input
            v-model="queryData.keyWord"
            :placeholder="$t('please enterquery关键字')"
          ></el-input>
        </template>
        <template #seachDate>
          <l-date
            format="yyyy-MM-dd"
            dateType="daterange"
            v-model="queryData.seachDate"
            :startPlaceholder="$t('开始时间')"
            :endPlaceholder="$t('结束时间')"
          >
          </l-date>
        </template>
      </l-query2>
    </template>
    <template #toolRight>
      <l-tool-btns :hasAdd="false"> </l-tool-btns>
    </template>
    <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="columns"
      :dataSource="tableData"
      :isPage="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      @loadPageData="turnTablePage"
    >
      <template v-slot:f_Title="scope">
        <el-button @click="handleCreate(scope.row)" size="mini" type="text">{{
          scope.row.f_Title
        }}</el-button>
      </template>
      <template v-slot:f_CreateDate="scope">
        {{ lr_dateFormat(scope.row.f_CreateDate) }}
      </template>
      <l-table-btns
        :isAuth="false"
        :isFixed="false"
        :btns="tableBtns"
        @click="lr_handleTableBtnClick"
      ></l-table-btns>
    </l-table>
    <wf-create-form
      ref="form"
      type="draft"
      :params="{ processId: processId }"
      :isLoadFormData="true"
      :title="title"
      :visible.sync="visible"
      @refresh="loadTableData(true)"
    />
  </l-panel>
</template>

<script>
const api = window.$api.workflow.process;
export default {
  data() {
    return {
      queryItems: [
        { prop: "seachDate", span: 24 },
        { prop: "keyWord", span: 24 },
      ],
      queryData: {
        keyWord: "",
        seachDate: "",
      },
      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "标题", prop: "f_Title", minWidth: 100, align: "left" },
        {
          label: "流程模版",
          prop: "f_SchemeName",
          minWidth: 60,
          align: "left",
        },
        {
          label: "提交者",
          prop: "f_UserId",
          width: 200,
          align: "left",
          dataType:'fullUser',isNotAutoWrap:true
        },
        { label: "提交时间", prop: "f_CreateDate", width: 160, align: "left" },
      ],
      tableBtns: [{ prop: "Delete", label: "Delete",width: 100 }],

      visible: false,
      title: "",
      processId: "",
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      const queryData = this.$deepClone(this.queryData);

      if (queryData.seachDate) {
        const dateList = queryData.seachDate.split(" - ");
        queryData.startDate = dateList[0];
        queryData.endDate = dateList[1];
        queryData.seachDate = null;
      }

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_CreateDate DESC";

      let data = await this.$awaitWraper(api.getMyDraftPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
    handleCreate(row) {
      this.title = row.f_SchemeName;
      this.processId = row.f_Id;
      this.visible = true;
    },

    handleDelete($index, row) {
      this.$confirm(this.$t("This operation will permanently delete the data. Do you want to continue?"), this.$t("Tips"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.deleteDraft(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("Delete  success"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Delete has been canceled"),
          });
        });
    },
  },
};
</script>